<template>
  <view
    class="tabbar_box"
    :class="[isIphoneX ? 'iphoneX-height' : '']"
    :style="{ height: `${height}rpx` }"
  >
    <view class="tabbar_item" @click="toggleNav(1)">
      <!--选中-->
      <view v-if="current == 1" class="tb_home1_ans">
        <image
          src="http://llg.qiniu.comeinvip.com/images/tabbar/home_hover.png"
        ></image>
        <text>剧场</text>
      </view>
      <!--默认-->
      <view v-else class="tb_home1">
        <image
          src="http://llg.qiniu.comeinvip.com/images/tabbar/home.png"
        ></image>
      </view>
    </view>
    <view class="tabbar_item" @click="toggleNav(2)">
      <!--选中-->
      <view v-if="current == 2" class="tb_home1_ans">
        <image
          src="http://llg.qiniu.comeinvip.com/images/tabbar/perfomer_hover.png"
        ></image>
        <text>演员</text>
      </view>
      <!--默认-->
      <view v-else class="tb_home1">
        <image
          src="http://llg.qiniu.comeinvip.com/images/tabbar/performer.png"
        ></image>
      </view>
    </view>
    <view class="tabbar_item" @click="toggleNav(3)">
      <!--选中-->
      <view v-if="current == 3" class="tb_home1_ans">
        <image
          src="http://llg.qiniu.comeinvip.com/images/tabbar/scene_hover.png"
        ></image>
        <text>现场</text>
      </view>
      <!--默认-->
      <view v-else class="tb_home1">
        <image
          src="http://llg.qiniu.comeinvip.com/images/tabbar/scene.png"
        ></image>
      </view>
    </view>
    <view class="tabbar_item" @click="toggleNav(4)">
      <!--选中-->
      <view v-if="current == 4" class="tb_home1_ans">
        <image
          src="http://llg.qiniu.comeinvip.com/images/tabbar/member_hover.png"
        ></image>
        <text>我的</text>
      </view>
      <!--默认-->
      <view v-else class="tb_home1">
        <image
          src="http://llg.qiniu.comeinvip.com/images/tabbar/member.png"
        ></image>
      </view>
    </view>
  </view>
</template>

<script>
import util from "@/utils/util.js";
export default {
  props: {
    current: Number,
  },
  data() {
    return {
      // current:1,
      isIphoneX: false, // 手机机型
      height: 94,
    };
  },
  methods: {
    toggleNav(index) {
      if (index == 1) {
        uni.reLaunch({
          url: "/pages/tabBar/index_tabBar",
        });
      } else if (index == 2) {
        uni.reLaunch({
          url: "/pages/tabBar/performer_tabBar",
        });
      } else if (index == 3) {
        uni.reLaunch({
          url: "/pages/tabBar/scene_tabBar",
        });
      } else if (index == 4) {
        uni.reLaunch({
          url: "/pages/tabBar/member_tabBar",
        });
      }
    },
  },
  created() {
    this.isIphoneX = util.getSystemInfoForPhone(); // 判断手机机型是否为iPhone X以上
  },
};
</script>

<style>
@import url(@/static/css/public.css);
</style>
